<div [@flyIn]="'active'">

  <div class="wrapper-sm">
    <div class="panel panel-default" style="margin-bottom:-5px;border-radius:5px">
      <div class="panel-body" style="font-size: 10px;padding:5px 20px; " >
        <div class="m-t-xs m-t-sm">
          <span>设备急修</span>
          <i class="fa fa-angle-right"></i>
          <span>维修工单 </span>
          <i class="fa fa-angle-right"></i>
          <span>工单详情</span>
        </div>
      </div>
    </div>
  </div>
  <div class="wrapper-sm" style="font-size:12px" *ngIf="data">
    <div class="panel panel-default" style="border-radius:5px">
      <div class="panel-body">
        <div class="m-t-n-xs m-b-md" style="text-align:center;color:white;background-color:#56abe4;line-height:50px;font-size:25px">工单编号：{{orderId}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span *ngIf="data.status[data.status.length-1].status==1">工单状态：报警</span>

          <span *ngIf="data.status[data.status.length-1].status==2">工单状态：接警</span>
          <span *ngIf="data.status[data.status.length-1].status==3">工单状态：到场</span>
          <span *ngIf="data.status[data.status.length-1].status==4">工单状态：完工</span>
          <span *ngIf="data.status[data.status.length-1].status==5">工单状态：恢复</span>
          <span *ngIf="data.status[data.status.length-1].status==6">工单状态：客户确认</span>
          <span *ngIf="data.status[data.status.length-1].status==7">工单状态：自动确认</span>
          <span *ngIf="data.status[data.status.length-1].status==8">工单状态：撤销</span>
        </div>
        <div id="lrzj_x">
          <ul id="timl">
            <li  style="color:orange;background:url('../../../../../assets/img/biggerdot.png') center bottom no-repeat">
              <span>报警</span><br/>
              <span class="icon iconfont icon-jingbaodeng" style="font-size:25px"></span>
            </li>
            <li *ngIf="data.status[data.status.length-1].status>=2 && data.status[data.status.length-1].status!=5 && data.status[data.status.length-1].status!=8" style="color:orange;background:url('../../../../../assets/img/biggerdot.png') center bottom no-repeat">
              <span>接警</span><br />
              <span class="icon iconfont icon-yijie" style="font-size:25px"></span>
            </li>
            <li *ngIf="data.status[data.status.length-1].status<2  || data.status[data.status.length-1].status==5 || data.status[data.status.length-1].status==8">
              <span>接警</span><br />
              <span class="icon iconfont icon-yijie" style="font-size:25px;color:gray"></span>
            </li>
            <li *ngIf="data.status[data.status.length-1].status>=3 && data.status[data.status.length-1].status!=5 && data.status[data.status.length-1].status!=8" style="color:orange;background:url('../../../../../assets/img/biggerdot.png') center bottom no-repeat">
              <span>到场</span><br />
              <span class="icon iconfont icon-shuniu1" style="font-size:25px"></span>
            </li>
            <li *ngIf="data.status[data.status.length-1].status<3  || data.status[data.status.length-1].status==5 || data.status[data.status.length-1].status==8">
              <span>到场</span><br />
              <span class="icon iconfont icon-shuniu1" style="font-size:25px;color:gray"></span>
            </li>
            <li *ngIf="data.status[data.status.length-1].status>=4 && data.status[data.status.length-1].status!=5 && data.status[data.status.length-1].status!=8" style="color:orange;background:url('../../../../../assets/img/biggerdot.png') center bottom no-repeat">
              <span>完工</span><br />
              <span class="icon iconfont icon-yiqueren" style="font-size:25px"></span>
            </li>
            <li *ngIf="data.status[data.status.length-1].status<4  || data.status[data.status.length-1].status==5 || data.status[data.status.length-1].status==8">
              <span ui-sref="#">完工</span><br />
              <span class="icon iconfont icon-yiqueren" style="font-size:25px;color:gray"></span>
            </li>
            <li *ngIf="data.status[data.status.length-1].status==6" style="color:orange;background:url('../../../../../assets/img/biggerdot.png') center bottom no-repeat">
              <span>客户确认</span><br />
              <span class="icon iconfont icon-jiazukehub89d30" style="font-size:25px"></span>
            </li>
            <li *ngIf="data.status[data.status.length-1].status<6 || data.status[data.status.length-1].status==5 || data.status[data.status.length-1].status==8 " style="color:gray">
              <span>客户确认</span><br />
              <span class="icon iconfont icon-jiazukehub89d30" style="font-size:25px;"></span>
            </li>
          </ul>
          <div class="m-t-sm">
          <span *ngIf="data.status[data.status.length-1].status!=5">
            <span style="margin-left:80px" *ngFor="let sta of data.status">{{sta.change_time}}</span>
          </span>
          <span *ngIf="data.status[data.status.length-1].status==5">
            <span style="margin-left:80px" *ngIf="data.status[0]?.status==1">{{data.status[0].change_time}}</span>
            <span style="margin-left:80px" *ngIf="data.status[1]?.status==2">{{data.status[1].change_time}}</span>
            <span style="margin-left:80px" *ngIf="data.status[2]?.status==3">{{data.status[2].change_time}}</span>
            <span style="margin-left:80px" *ngIf="data.status[3]?.status==4">{{data.status[3].change_time}}</span>
            <span style="margin-left:80px" *ngIf="data.status[4]?.status==6">{{data.status[4].change_time}}</span>
          </span>
          </div>
          <div class="panel panel-default m-t-md">
            <div class="panel-heading" >
              基本信息
            </div>
            <div class="panel-body">
              <div class="m-l-md m-t-sm" style="font-size:14px;color:#23b7e5 "><b>工单信息</b></div>
              <div class="list-group-item ">
                <div class="row">
                  <span class="col-sm-6" >工单编号：{{orderId}}</span>

                  <span class="col-sm-6" >报警时间：{{data.guzhang.created}}</span>
                </div>
              </div>
              <div class="list-group-item">
                <div class="row">
                  <span class="col-sm-6" >报警类型：{{data.guzhang.display_name}}</span>
                  <span class="col-sm-6">报&nbsp;&nbsp;&nbsp;警&nbsp;&nbsp;&nbsp;人：{{data.guzhang.bjr}}</span>
                </div>
              </div>
              <div class="list-group-item">
                <div class="row">
                  <span class="col-sm-6">问题描述：{{data.guzhang.description}}</span>
                </div>
              </div>


              <div class="m-l-md m-t-sm" style="font-size:14px;color:#23b7e5 "><b>设备信息</b></div>
              <div class="list-group-item ">
                <div class="row">
                        <span class="col-sm-6">
                            空压站：{{data.group.name}}
                        </span>
                        <span class="col-sm-6">
                            设备编号：{{data.device.mac}}
                        </span>
                </div>
              </div>
              <div class="list-group-item">
                <div class="row">
                  <span class="col-sm-6">设备品牌：{{data.device.brand}}</span>
                  <span class="col-sm-6">产品名称：{{data.device.product_name}}</span>
                </div>
              </div>
              <div class="list-group-item">
                <div class="row">
                  <span class="col-sm-6">设备名称：{{data.device.device_name}}</span>
                  <span class="col-sm-6">设备地址：{{data.device.province}}{{data.device.city}}{{data.device.area}}</span>
                </div>
              </div>
              <div class="m-l-md m-t-sm" style="font-size:14px;color:#23b7e5 "><b>维保信息</b></div>
              <div class="list-group-item">
                <div class="row">
                  <span class="col-sm-6">空压站联系人：{{data.group.lxr}}</span>
                  <span class="col-sm-6">空压站联系人电话：{{data.group.lxdh}}</span>
                </div>
              </div>

              <div class="list-group-item">
                <div class="row">
                  <span class="col-sm-6">维保联系人：{{data.wb.nick_name}}</span>
                  <span class="col-sm-6">维保联系人电话：{{data.wb.mobile}}</span>
                </div>
              </div>
            </div>

          </div>
          <div class="panel panel-default m-t-sm">
            <div class="panel-heading">
              设备记录
            </div>
            <div class="panel-body">
              <table  class="table table-hover table-striped m-b-none default footable " style="font-size: 12px;height: auto">
                <thead>
                <tr>
                  <th  style="width:10%">状态</th>
                  <th  style="width:10%">时间</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let onsta of items[page-1]">
                  <td>
                    <a *ngIf="onsta.online==0">
                      <span class="label bg-danger inline m-t-xs" >离线</span>
                    </a>
                    <a *ngIf="onsta.online==1">
                      <span class="label bg-success inline m-t-xs">在线</span>
                    </a>
                  </td>
                  <td>
                    <a>
                      <span style="color: blue">{{onsta.created}}</span>
                    </a>
                  </td>
                </tr>
                </tbody>
              </table>

              <app-pagination [pageModel]="pageModel" (pageChanged)="page=$event"></app-pagination>

            </div>

            <div class="list-group-item">
              <div style="text-align:center">
                <a class="btn btn-sm btn-default" (click)="cancel()">返回</a>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>
</div>
